<template>
	<view class="page" style="padding-top: 100rpx;">
		<u-field v-model="mobile" label="手机号" placeholder="请填写手机号">
		</u-field>
		<u-field v-model="password" v-if="!forgetPwd" label="密码" :password="true" placeholder="请输入密码">
			<u-button size="mini" slot="right" type="error" @click="forgetPwd = true">忘记密码?</u-button>
		</u-field>
		<u-field v-model="code" v-if="forgetPwd" label="验证码" placeholder="请填写验证码">
			<u-button size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
		</u-field>
		<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
		<view class="login" @click="loginBtn">
			<text>立即登录</text>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import {
		getLoginCode,
		phoneLogin,
		passwordLogin,
		getUserInfo,
		getUserLevel
	} from '@/api/mine.js'
	export default {
		data() {
			return {
				mobile: '17683773308',
				code: '',
				codeText: '',
				password: 'yc123456789',
				forgetPwd: false
			}
		},
		onLoad() {},
		methods: {
			...mapMutations(['login']),
			codeChange(text) {
				this.codeText = text;
			},
			// 获取验证码
			getCode() {
				const that = this
				let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
				if (that.mobile == '') {
					return uni.showToast({
						title: '请先输入手机号!',
						icon: 'none'
					})
				} else if (!phoneReg.test(that.mobile)) {
					return uni.showToast({
						title: '请输入正确的手机号!',
						icon: 'none'
					})
				}
				if (that.$refs.uCode.canGetCode) {
					getLoginCode(that.mobile)
					// 通知验证码组件内部开始倒计时
					that.$refs.uCode.start();
				} else {
					that.$u.toast('倒计时结束后再发送');
				}
			},
			// 验证码登录
			validateLogin() {
				console.log('验证码登录')
				uni.showLoading({
					title: '登陆中'
				})
				phoneLogin(this.mobile, this.code).then(res => {
					let token = res.data.token
					let cookie = res.data.cookie
					uni.setStorageSync('cookie', cookie)
					uni.setStorageSync('token', token)
					let userInfo = {}
					this.getUserInfo().then(res2 => {
						userInfo = res2
						this.login(userInfo)
						uni.hideLoading()
						uni.switchTab({
							url: '../mine'
						})
					})
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
					uni.showToast({
						title: '登陆失败,' + err,
						icon: 'none'
					})
				})
			},
			// 密码登录
			passwordLogin() {
				console.log('密码登录')
				uni.showLoading({
					title: '登陆中'
				})
				passwordLogin(this.mobile, this.password).then(res => {
					let token = res.data.token
					let cookie = res.data.cookie
					uni.setStorageSync('cookie', cookie)
					uni.setStorageSync('token', token)
					let userInfo = {}
					this.getUserInfo().then(res2 => {
						userInfo = res2
						this.login(userInfo)
						uni.hideLoading()
						uni.switchTab({
							url: '../mine'
						})
					})
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '登陆失败' + err,
						icon: 'none'
					})
				})
			},
			// 获取用户信息
			getUserInfo() {
				let p = new Promise((resolve,reject) => {
					let userInfo = {}
					getUserInfo().then(res => { //获取用户信息
						userInfo = res.data
						getUserLevel().then(res => { //获取用户等级
							userInfo.level = res.data.level
							resolve(userInfo)
						})
					})
				})
				return p
			},
			// 登录
			loginBtn() {
				this.forgetPwd ? this.validateLogin() : this.passwordLogin()
			}
		}
	}
</script>

<style lang="less" scoped>
	.login {
		width: 550rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		background-color: #dc2c1f;
		color: #fff;
		margin-left: 100rpx;
		border-radius: 35rpx;
		margin-top: 200rpx;
	}
</style>
